<template>
  <div>
    <el-dialog
      title="选择承运商"
      :visible.sync="dialogVisible"
      width="800px  "
      class="tableDialog"
      :before-close="handleClose"
    >
      <div class="dialog-container">
        <div class="container">
          <section class="dialogSearch">
            <el-input v-model="inputName" placeholder="请输入客户名称" @input=" getList2 ($event,true)">
              <i slot="suffix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <el-table
              size="mini"
              v-loading="loading"
              :data="tableData"
              style="width: 100%; margin-top: 10px"
              border
              :header-cell-style="{
                'background-color': '#eeeeee !important'
              }"
              :row-class-name="tableRowClassName"
            >
              <el-table-column
                type="index"
                label="序号"
                width="60"
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{
                    (page.pageNo - 1) * page.pageSize + scope.$index + 1
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="names"
                label="名称"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                prop="countyCode"
                label="地区"
                align="left"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column label="操作" width="75px">
                <template slot-scope="scope">
                  <el-link
                    type="primary"
                    :underline="false"
                    @click="selectRow(scope.row)"
                  >选择
                  </el-link
                  >
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              background
              @current-change="handleCurrentChange"
              :page-size="page.pageSize"
              :current-page="page.pageNo"
              layout="total,prev, pager, next"
              :total="page.total"
            >
            </el-pagination>
          </section>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {getWindowList} from '@/api/market/crm.js'

  export default {
    data () {
      return {
        tableData: [],
        loading: false,
        dialogVisible: false,
        inputName: '',
        data: [],
        page: {
          pageSize: 10,
          pageNo: 1,
          total: 20
        }
      }
    },
    methods: {
      init (method, props) {
        if (method === 'carrier') {
          this.dialogVisible = true
          this.props = props
          this.getCompanyList(this.page)
        }
      },
      handleCurrentChange (e) {
        this.page.pageNo = e
        this.getCompanyList(this.page)
        console.log(e)
      },
      // 获取列表
      getCompanyList (params) {
        getWindowList({
          pageSize: params.pageSize,
          pageNo: params.pageNo,
          props: this.props
        }).then((res) => {
          if (res.data.code === '200') {
            this.tableData = res.data.result.list
            this.page.total = res.data.result.count
            console.log(this.page.total)
          }
        })
      },

      // 点击树获取列表和搜索获取列表
      getList2 ($event, isSearch) {
        console.log($event)
        if (isSearch) {
          getWindowList({names: $event}).then((res) => {
            if (res.data.code === '200') {
              this.tableData = res.data.result.list
              this.page.total = res.data.result.count
              console.log(this.page.total)
            }
          })
        }
      },

      tableRowClassName ({row, rowIndex}) {
        if (rowIndex % 2 === 1) {
          return 'warning-row'
        } else {
          return 'success-row'
        }
      },
      // 选择行
      selectRow (row) {
        this.$emit('getCarrierData', row)
        this.dialogVisible = false
      },

      handleClose (done) {
        done()
      },
      close () {
      },
      doSubmit () {
      }
    }
  }
</script>
<style scoped lang="scss">
  .dialog-container {
    width: 100%;
  }

  .container {
    width: 100%;
    height: 500px;
    display: flex;
  }

  .left-container {
    margin-right: 20px;
    width: 100px;
    overflow: auto; /*当内容超过，出现滚动条*/
  }

  .dialog-footer {
    width: 200px;
    margin: 0 auto;
    margin-bottom: 20px;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  ::v-deep .el-table .warning-row {
    background: #f7f7f7;
  }
</style>
